<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员仪表盘 - WeiLanBlog</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        /* 全局样式，使用相对单位 rem */
        html {
            font-size: 16px;
        }

        body {
            font-family: 'Roboto', Arial, sans-serif;
            background-color: #f0f2f5;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

       .container {
            max-width: 900px;
            width: 95%;
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* 状态栏样式 */
       .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin-bottom: 1.5rem;
            color: #666;
        }

       .status-bar span {
            font-size: 0.9rem;
            display: flex;
            align-items: center;
        }

       .status-bar span svg {
            width: 16px;
            height: 16px;
            margin-right: 5px;
            fill: #666;
        }

        /* 标题样式 */
       .header h1 {
            text-align: center;
            color: #1890ff;
            margin-bottom: 2rem;
            font-size: 2rem;
        }

        /* 登录表单样式 */
       .login-form {
            text-align: center;
            margin-bottom: 2rem;
            width: 100%;
        }

       .login-form h2 {
            color: #333;
            margin-bottom: 1.5rem;
            font-size: 1.5rem;
        }

       .login-form form {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

       .login-form label {
            font-size: 1rem;
            margin-bottom: 0.7rem;
            text-align: left;
            width: 100%;
            color: #555;
        }

       .login-form input {
            width: 100%;
            padding: 0.7rem;
            margin-bottom: 1rem;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 0.9rem;
            transition: border - color 0.3s ease;
        }

       .login-form input:focus {
            border-color: #1890ff;
        }

       .login-form button {
            background-color: #1890ff;
            color: white;
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.3s ease;
        }

       .login-form button:hover {
            background-color: #096dd9;
        }

        /* 统计信息样式 */
       .dashboard-content {
            display: grid;
            grid-template-columns: repeat(auto - fit, minmax(15rem, 1fr));
            grid-gap: 1.5rem;
            margin-bottom: 2rem;
            width: 100%;
        }

       .metric {
            background-color: #f9f9f9;
            padding: 1.5rem;
            border-radius: 10px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

       .metric h2 {
            color: #333;
            margin-bottom: 0.7rem;
            font-size: 1.2rem;
        }

       .metric p {
            color: #666;
            margin: 0;
            font-size: 1rem;
        }

        /* 图表容器样式 */
       .chart-container {
            text-align: center;
            width: 100%;
        }

       .chart-container h2 {
            color: #333;
            margin-bottom: 1.5rem;
            font-size: 1.3rem;
        }

        /* 媒体查询，针对小屏幕设备（如手机）进行样式调整 */
        @media (max - width: 480px) {
           .container {
                padding: 1rem;
            }

           .login - form form input,
           .login - form form label {
                font-size: 0.8rem;
            }

           .login - form button {
                padding: 0.6rem 1rem;
            }

           .metric h2 {
                font-size: 1rem;
            }

           .metric p {
                font-size: 0.9rem;
            }

           .chart - container h2 {
                font-size: 1.1rem;
            }
        }

        /* 添加隐藏类 */
       .hidden {
            display: none;
        }

        /* 导出按钮样式 */
       .export-button {
            background-color: #1890ff;
            color: white;
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.3s ease;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
        }

       .export-button svg {
            width: 20px;
            height: 20px;
            margin-right: 8px;
            fill: white;
        }

       .export-button:hover {
            background-color: #096dd9;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3v2.21l6.34 3.52c.26.14.46.4.46.69V19c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V9.42c0-.29.2-.55.46-.69L12 5.21V3z" /></span>16:34
            <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 14.25l-8-5v11l8-5z" /></span>HD
            <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-8-5v11l8-5z" /></span>5G
            <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 6h2v12h-2z" /><path d="M8 18H6V6h2v12zm10-12H14V4h2c1.1 0 2.09.9 2 2v12c0 1.1-.9 2-2 2h-2v-2h2V6z" /></span>50%
        </div>

        <!-- 标题 -->
        <div class="header">
            <h1>管理员仪表盘 - WeiLanBlog</h1>
        </div>

        <!-- 登录表单 -->
        <div class="login-form" id="loginForm">
            <h2>登录</h2>
            <form method="post" action="process.php">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" required>
                <label for="password">密码:</label>
                <input type="password" id="password" name="password" required>
                <label for="captcha">验证码:</label>
                <input type="text" id="captcha" name="captcha" required>
                <button type="submit">登录</button>
            </form>
        </div>

        <!-- 统计信息 -->
        <div class="dashboard-content hidden" id="dashboardContent">
            <div class="metric">
                <h2>访问人数</h2>
                <p id="visitorCount">0</p>
            </div>
            <div class="metric">
                <h2>流量</h2>
                <p id="trafficCount">0 KB</p>
            </div>
            <div class="metric">
                <h2>用户活跃度</h2>
                <p id="userActivityCount">0</p>
            </div>
            <div class="metric">
                <h2>暴力破解记录</h2>
                <pre id="bruteForceLog"></pre>
            </div>
            <!-- 添加导出按钮 -->
            <button class="export-button" onclick="exportToCSV()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 10H5v2h14v-2zm0-4H5v2h14V6zM5 16h14v-2H5v2z" /></span>导出为 CSV</button>
            <button class="export-button" onclick="exportToPDF()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 18h2v2H5v-2h2v-7H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14c1.1 0 2.09.9 2 2v4h-2V5H5v2h14v9c0 1.1-.9 2-2 2h-7v2z" /></span>导出为 PDF</button>
        </div>

        <!-- 流量统计曲线图 -->
        <div class="chart-container hidden" id="trafficChartContainer">
            <h2>流量统计（最近6个月）</h2>
            <canvas id="trafficChart"></canvas>
        </div>

        <!-- 用户活跃度曲线图 -->
        <div class="chart-container hidden" id="userActivityChartContainer">
            <h2>用户活跃度（最近6个月）</h2>
            <canvas id="userActivityChart"></canvas>
        </div>
    </div>

    <!-- JavaScript 逻辑 -->
    <script>
        // 检查 localStorage 中的登录标识
        const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
        const loginForm = document.getElementById('loginForm');
        const dashboardContent = document.getElementById('dashboardContent');
        const trafficChartContainer = document.getElementById('trafficChartContainer');
        const userActivityChartContainer = document.getElementById('userActivityChartContainer');

        if (isLoggedIn) {
            loginForm.classList.add('hidden');
            dashboardContent.classList.remove('hidden');
            trafficChartContainer.classList.remove('hidden');
            userActivityChartContainer.classList.remove('hidden');

            // 读取暴力破解记录并显示
            fetch('brute_force_log.txt')
               .then(response => response.text())
               .then(data => {
                    document.getElementById('bruteForceLog').textContent = data;
                })
               .catch(error => {
                    console.error('无法读取暴力破解记录:', error);
                });

            // 这里可以添加初始化图表的代码
            // 原有的 chart.js 和 script.js 用于处理图表展示，可在已登录时调用相关函数进行图表绘制
        } else {
            loginForm.classList.remove('hidden');
            dashboardContent.classList.add('hidden');
            trafficChartContainer.classList.add('hidden');
            userActivityChartContainer.classList.add('hidden');
        }

        // 导出为 CSV 的函数
        function exportToCSV() {
            window.location.href = 'export_csv.php';
        }

        // 导出为 PDF 的函数
        function exportToPDF() {
            window.location.href = 'export_pdf.php';
        }
    </script>
    <script src="assets/js/chart.js"></script>
    <script src="assets/js/script.js"></script>
</body>

</html>
